.main .container {
    width: 1200px;
    border-radius: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, .7);
    box-shadow: 2px 2px 10px 0 #000;

    display: flex;
    flex-direction: column;
}

.main .container input {
    width: 100%;
    height: 32px;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid #555;
    margin: 12px 0;
}

.controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main .container button {
    width: 220px;
    height: 32px;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid #555;
    margin: 12px 0;
}

.main .container button {
    background-color: #c67915;
    transition: background-color .2s ease;
}

.main .container button:disabled {
    background-color: hsl(34, 81%, 33%);
    color: #999;
}

.main .container button:hover:not(button:disabled) {
    background-color: hsl(34, 81%, 63%);
}

audio {
    width: 100%;
}